<template>
  <el-col :span="innerSpan">
    <el-form-item
      class="ui-form-item"
      :class="{'is-not-margin-bottom': !marginBottom}"
      v-bind="$props"
      :label="innerLabel"
      :label-width="innerLabelWidth"
    >
      <slot></slot>
      <div class="ui-form-item__tips" v-if="$slots.tips || tips">
        <slot name="tips">{{ tips }}</slot>
      </div>
    </el-form-item>
  </el-col>
</template>
<script>
import Col from 'element-ui/lib/col'
import 'element-ui/lib/theme-chalk/col.css'
import FormItem from 'element-ui/lib/form-item'
import 'element-ui/lib/theme-chalk/form-item.css'

export default {
  name: 'UiFormCell',
  props: Object.assign({
    tips: {
      type: String
    },
    span: {
      type: Number
    },
    showLabel: {
      type: Boolean,
      default: true
    },
    marginBottom: {
      type: Boolean,
      default: true
    }
  }, FormItem.props),
  components: {
    ElCol: Col,
    ElFormItem: FormItem
  },
  computed: {
    parent () {
      return this.$parent.$parent
    },
    innerSpan () {
      if (this.span) {
        return this.span
      } else {
        let num = 0
        if (this.parent && this.parent.$options.name === 'UiFormRow' && this.parent.$slots.default) {
          num = this.parent.$slots.default.filter(v => {
            return v && v.componentOptions && v.componentOptions.Ctor && v.componentOptions.Ctor.options && v.componentOptions.Ctor.options.name === 'UiFormCell'
          }).length
        }
        return num === 0 ? 24 : 24 / num
      }
    },
    innerLabel() {
      if (!this.showLabel) {
        return
      }
      return this.label
    },
    innerLabelWidth() {
      if (!this.showLabel) {
        return '0px'
      }
      return this.labelWidth
    }
  }
}
</script>
<style lang="less">
.ui-form{
  &.el-form--label-left{
    .ui-form-item{
      &.el-form-item{
        &.is-required{
          .el-form-item__label{
            &:before{
              float: right;
              margin-left: 4px;
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .el-form-item__label{
    line-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .el-form-item__content{
    line-height: 32px;
  }
}
.ui-form-item{
  &.el-form-item{
    margin-bottom: 18px;
    &.is-error {
      margin-bottom: 4px;
    }
    .el-form-item__error{
      padding-top: 3px;
      position: static;
      transition: none;
    }
    &.is-not-margin-bottom{
      margin-bottom: 0;
    }
  }
}
.ui-form-item__tips{
  line-height: 1.7em;
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}
</style>
